<template>
  <div class="home">
    <div class="left">
      <left-handle class='leftItem'></left-handle>
    </div>
    <div class="center">
      <!-- <center-tool></center-tool> -->
    </div>
    <div class="right" id='myMap'></div>
  </div>
</template>

<script>
import leftHandle from '@/components/home/leftHandle.vue'
// import MapboxLanguage from '@mapbox/mapbox-gl-language';
export default {
  name: 'programCat',

  components: {
    leftHandle,
  },

  created() {

  },

  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // let map = new MapBox.Map({
      //   container: 'myMap', // container ID
      //   style: 'mapbox://styles/mapbox/streets-v11', // style URL
      //   center: [118.1738, 39.6296], // starting position [lng, lat]
      //   zoom: 19, // starting zoom
      //   projection: 'globe' // display the map as a 3D globe
      // });
      //   let lang = new MapboxLanguage({defaultLanguage: 'zh-Hans'})
      //   map.addControl(lang)
      // map.on('style.load', () => {
      //     map.setFog({}); // Set the default atmosphere style
      // });

    }
  }
}
</script>
<style lang="scss" scoped>
.home{
  display: flex;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  .left,.center,.right{
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .left{
    width: calc(50vw - 90px);
    .leftItem{
      width: 100%;
      height: 100%;
    }
  }
  .center{
    width: 100px
  }
  .right{
    width: calc(50vw - 90px);
  }
}
</style>
